<template>
  <div class="content">
    <a-form
      :model="form"
      :style="{ width: '600px' }"
      :rules="rules"
      @submit="handleSubmit"
    >
      <a-form-item field="userName" label="姓名">
        <a-input v-model="form.userName" placeholder="请输入姓名" />
      </a-form-item>
      <a-form-item field="jobnumber" label="工号">
        <a-input v-model="form.jobnumber" placeholder="请输入工号" disabled/>
      </a-form-item>
      <a-form-item field="gender" label="性别">
        <a-select
          v-model="form.gender"
          :options="options"
          :field-names="fieldNames"
          :style="{ width: '320px' }"
          placeholder="选择性别"
        />
      </a-form-item>
      <a-form-item field="phone" label="电话号码">
        <a-input v-model="form.phone" placeholder="请输入电话号码" />
      </a-form-item>
      <a-form-item field="avatar" label="头像">
        <UploadMoudle :file="form.avatar" :id="form.jobnumber" @update="updateAvatar"></UploadMoudle>
      </a-form-item>
      <a-form-item>
        <div class="btn">
          <a-button html-type="submit" type="primary" long>提交</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import UploadMoudle from "@/components/upload/UploadMoudle.vue";
import { userApi } from "@/api/index";
import { checkTelephone } from "@/untils/is";
import { Message } from "@arco-design/web-vue";

let form = ref({
  userName: "",
  phone: "",
  jobnumber: "",
  gender: 1,
  avatar: "",
});
const fieldNames = { value: "gender", label: "text" };
const options = reactive([
  {
    gender: "1",
    text: "男",
  },
  {
    gender: "0",
    text: "女",
  },
]);
const rules = {
  userName: [
    {
      required: true,
      message: "name is required",
    },
  ],
  phone: [
    {
      required: true,
      message: "phone is required",
    },
    {
      validator: (value, cb) => {
        if (!checkTelephone(value)) {
          cb("格式不正确");
        } else {
          cb();
        }
      },
    },
  ],
  account: [
    {
      required: true,
      message: "账号是必填项",
    },
  ],
  gender: [
    {
      message: "性格是必选项",
      required: true,
    },
  ],
  avatar: [
    {
      message: "请选择头像上传",
      required: true,
    },
  ],
};
const updateAvatar = (data) => {
  form.value.avatar = data;
  // console.log(data);
  // console.log(form);
};
const handleSubmit = (data) => {
  console.log(data);
  if (!data.errors) {
    userApi
      .updateUserInfo(data)
      .then((res) => {
        console.log(res);
        Message.success({
          content: res.msg || '提交成功',
          position: "top",
        });
      })
      .catch((err) => {
        console.log(err);
        Message.error({
          content: err.msg || 'error',
          position: "top",
        });
      });
  }
};
const getUserInfo = () => {
  userApi
    .getCurrentUserInfo()
    .then((res) => {
      console.log(res);
      form.value = res.data;
    })
    .catch((err) => {
      console.log(err);
        Message.error({
          content: err.msg || 'error',
          position: "top",
        });
    });
};
getUserInfo();
</script>
  <style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 50px;
  //   align-items: center;
  //   justify-content: center;
}
</style>